<template>
	<transition name="my-fade" @after-leave="handAfterLeave">
		<!-- <div :class="['custom-message', `my-message-${type}`]" v-text="msg" v-show="isShow" :style="`top:${topOffset}px`"> -->
		<div :class="['custom-message', `my-message-${type}`]" v-show="isShow" :style="`top:${topOffset}px`">
			<!-- <i class="wj-icon-wenzhangguanli"></i> -->
      {{msg}}
		</div>
	</transition>
</template>

<script>
export default {
	name: "Message",
	data() {
		return {
			msg: "",
			duration: 3000,
			isShow: false,
			topOffset: 20,
			onClose: null,
			type: "success",
		};
	},
	mounted() {
		this.closeMsg();
	},

	methods: {
		// 过度动画结束时销毁和移除当前节点dom
		handAfterLeave() {
			this.$destroy(true);
			this.$el.parentNode.removeChild(this.$el);
		},
		// 设置定时器 关闭消息
		closeMsg() {
			this.timer = setTimeout(() => {
				this.isShow = false;
				this.close();
				clearTimeout(this.timer);
			}, this.duration);
		},
		// 设置关闭时触发的关闭回调函数
		close() {
			if (typeof this.onClose === "function") {
				this.onClose(this);
			}
		},
	},
};
</script>

<style lang="less" scoped>
.my-fade-enter,
.my-fade-leave-to {
	opacity: 0;
	transform: translateY(-100%);
}
.custom-message {
	position: fixed;
	left: 38%;
	top: 20px;
	/* transform: translateX(-50%); */
	border-radius: 5px;
	min-width: 380px;
	max-width: 380px;
	padding: 12px;
	font-size: 14px;

	font-weight: 500;
	transition: all 0.4s ease-in-out;
}
.my-message-info {
	color: #909399;
	background-color: #edf2fc;
  /*
  多行提示用来缩进每一行
  padding-left: 50px;
  text-indent: -50px;
  */
  .wj-icon-wenzhangguanli{
    font-size: 18px;
    margin: 0 13.5px;
  }
}
.my-message-success {
	color: #67c23a;
	background-color: #f0f9eb;
}
.my-message-warning {
	color: #e6a23c;
	background-color: #fdf6ec;
}
.my-message-error {
	color: #f56c6c;
	background-color: #fef0f0;
}
</style>
